<template>
	<div class="login-container">
		<el-form	ref="loginForm"	:model="loginForm"	:rules="loginRules"	class="login-form"	auto-complete="on"	label-position="left">
			<div class="title-container">
				<h3 class="title">欢迎使用旧衣之家管理系统</h3>
			</div>
      <el-form-item prop="phone">
				<el-input	ref="phone"	v-model="loginForm.phone"	placeholder="请输入账号"	name="phone"	type="text"	tabindex="1"	auto-complete="on"/>
			</el-form-item>
      <el-form-item prop="password">
				<el-input	:key="passwordType"	ref="password"	v-model="loginForm.password"	style="width: 100%"	:type="passwordType"	placeholder="请输入密码"	name="password"	tabindex="2"	auto-complete="on"	:show-password="isPassword"	@keyup.enter.native="handleLogin">
					<span class="show-pwd" @click="isPassword = !isPassword">
						<svg-icon :icon-class="isPassword ? 'eye' : 'eye-open'" />
					</span>
				</el-input>
			</el-form-item>
			<div :loading="loading" type="primary" class="button" @click="handleLogin">登录</div>
		</el-form>
	</div>
</template>

<script>

import { BASE_URL } from '@/config'
import myaxios from '../http/MyAxios'
export default {
	data() {
		return {
      user:[],
      form:[],
			loginForm: {
				phone: '',
				password: ''
			},
			loginRules: {
				phone: [{ required: true, trigger: 'blur', message: '请输入账号' }],
				password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
			},
			loading: false,
			passwordType: 'password',
			redirect: undefined,

			index: 0,
			isPassword: true
		};
	},
	computed: {

	},
	watch: {

	},
	methods: {
    handleLogin(){
      let url =BASE_URL + '/v1/user/userSearch'
      this.form = this.loginForm
        myaxios.get(url,this.form).then(res=>{
          this.user = res.data.data[0]
          if(this.user.isAdmin == 2){
            console.log(res);
        window.sessionStorage.setItem("token",111)
        this.$router.push('/main');

      }
      else{
        this.$notify.error({
          title: '登陆失败!',
          message: '身份错误',
          position: 'top-left'
        });
      }
        }).catch(err=>{
          console.warn(err);
        })

    }
	}
};
</script>

<style lang="scss" scoped>
$dark_gray: #889aa4;
$light_gray: #eee;

.login-container {
  height: 100vh;
	min-height: 100%;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #304156;
  background-image: url(http://127.0.0.1:3000/app/009.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
	.login-form {
    // background-color: transparent;
		background-color: #ffffff;
    opacity: 0.8;
		width: 500px;
		padding: 40px;
		border-radius: 8px;
		max-width: 100%;
		overflow: hidden;
		box-shadow: 0px 1px 3px 0px rgb(40 76 185 / 0%), 0px 2px 6px 0px rgb(40 76 185 / 0%),
			0px 5px 9px 0px rgb(40 76 185 / 5%), 0px 17px 24px 0px rgb(40 76 185 / 8%);
	}

	.button {
		width: 100%;
		background: linear-gradient(176deg, #3885ec 0%, #2c55e3 100%);
		height: 60px;
		font-size: 20px;
		color: #ffffff;
		border-radius: 8px;
		text-align: center;
		line-height: 60px;
		margin-bottom: 40px;
		cursor: pointer;
	}

	.title-container {
		position: relative;

		.title {
			font-size: 26px;
			margin: 0px auto 40px auto;
			text-align: center;
			font-weight: bold;
		}
	}

	::v-deep .el-input {
		display: inline-block;
		height: 60px;
		width: 85%;

		input {
			background: transparent;
			border: 0px;
			-webkit-appearance: none;
			border-radius: 0px;
			padding: 12px 5px 12px 15px;
			height: 100%;
			//caret-color: #ffffff;

			&:-webkit-autofill {
				box-shadow: 0 0 0px 1000px #ffffff inset !important;
				//-webkit-text-fill-color: #ffffff !important;
			}
		}
	}

	::v-deep .el-form-item {
		border: 1px solid #dce3e7;
		background: #ffffff;
		border-radius: 5px;
		color: #454545;
		margin-bottom: 40px;
	}
}
</style>

